<template>
  <div class="flex h-100vh pr-195px w-100vw items-center justify-end">
    <img
      src="@/assets/images/bg1.png"
      alt="登录页背景图"
      class="object-cover h-100vh top-0 left-0 w-100vw fixed"
    />
    <div class="top w-360px fixed">
    
      <div class="bg-white rounded-9px p-30px form-container">
        <div class="font-medium text-center mb-30px text-20px text-[#272848]">
          系统登录
        </div>
        <el-form
          ref="formRef"
          :model="loginForm"
          :rules="rules"
          status-icon
          size="large"
        >
          <el-form-item prop="groupId">
            <el-input v-model="loginForm.groupId" placeholder="请输入集团号" />
          </el-form-item>
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入账号" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              placeholder="请输入密码"
              show-password
            />
          </el-form-item>
         
          <el-form-item class="-mt-15px">
            <div
              class="flex w-full text-12px text-[#9090A2] justify-between items-center"
            >
              <el-checkbox label="记住账号"></el-checkbox>
              <a href="">忘记密码?</a>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="submit"
              class="w-full"
              :loading="loading"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onUnmounted, reactive, ref } from "vue";
import { ElNotification, type FormRules } from "element-plus";
import { captcha } from "@/api/user";
import type { LoginOption } from "@/api/user/model";
import { useUserStore } from "@/stores/user";
import { useRouter } from "vue-router";
import { useSubmit } from "@/hooks/useSubmit";
import { setToken } from "@/utils/auth";

const { login } = useUserStore();
const router = useRouter();

const captchaImg = ref("");


const loginForm = reactive<LoginOption>({
  groupId: "hubeiprj",
  username: "beacon",
  password: "123456",
  token: "",
});
const rules: FormRules = {
  groupId: [{ required: true, message: "集团号不能为空", trigger: "change" }],
  username: [{ required: true, message: "账号不能为空", trigger: "change" }],
  password: [{ required: true, message: "密码不能为空", trigger: "change" }],
  
};

const getMessage = () => {
  const hour = new Date().getHours();
  if (hour >= 4 && hour < 9) {
    return "早上好，又是元气满满的一天呢。";
  }
  if (hour >= 9 && hour < 12) {
    return "上午好，要来一杯咖啡吗？";
  }
  if (hour >= 12 && hour < 18) {
    return "下午好，要多喝水，多运动。";
  }
  if (hour >= 18 && hour < 11) {
    return "晚上好，忙碌的一天即将结束。";
  }
  if (hour >= 11 && hour < 4) {
    return "夜深了，工作再忙，也要注意休息哦。";
  }
};

let message = getMessage();
fetch("https://v1.hitokoto.cn")
  .then((response) => response.json())
  .then((data) => {
    message = data.hitokoto;
  })
  .catch(console.error);

const { loading, submit, formRef } = useSubmit({
  form: loginForm,
  ajax: async () => {
    await login(loginForm);
    await router.push("/");
    ElNotification.success({
      title: "登录成功",
      message: message,
      position: "bottom-right",
    });
  },
});

const keyupListener = (e: KeyboardEvent) => {
  if(e.key === 'Enter') {
    submit();
  }  
};

document.addEventListener('keyup', keyupListener);

onUnmounted(() => {
  document.removeEventListener('keyup', keyupListener);
});
</script>

<style lang="scss" scoped>
.header {
  width: 45px;
  height: 3px;
  background: linear-gradient(
    90deg,
    rgba(63, 140, 246, 0) 0%,
    rgba(188, 215, 252, 0.65) 65%,
    #ffffff 100%
  );
}

.tail {
  width: 45px;
  height: 3px;
  background: linear-gradient(
    270deg,
    rgba(63, 140, 246, 0) 0%,
    rgba(188, 215, 252, 0.65) 65%,
    #ffffff 100%
  );
}

.form-container {
  box-shadow: 0px 3px 6px rgba(0, 66, 178, 0.3);
}

.form-container :deep(.el-checkbox__label) {
  font-size: 12px;
  color: #9090a2;
}
</style>
